<template>
	<view class="result">
		<view class="tips tc">
			<view class="p-15">
				<image :src="$xyfun.image('/static/images/fail.png')" v-if="payState=='fail'"/>
				<image :src="$xyfun.image('/static/images/success.png')" v-if="payState=='success'"/>
        <image :src="$xyfun.image('/static/images/repay.png')" v-if="payState=='repay'"/>
        <image :src="$xyfun.image('/static/images/repay.png')" v-if="payState=='audit'"/>
			</view>
			<text class="notice ts-34 tb">{{ payText[payState] }}</text>
		</view>
		<view class="action m-30 tc flex ts-28" v-if="payState!=='repay'">
			<view class="btn bl" @tap="$xyfun.to('/pages/index',true)">返回首页</view>
			<view class="btn bl" @tap="redirect" v-if=" payState !== 'fail' && orderType !== 'recharge' && orderType !== 'present' && orderType !== 'vip'">查看订单</view>
      <view class="btn bl" @tap="redirect" v-if=" payState !== 'fail' && orderType== 'vip'">查看课包</view>
		</view>
    <view class="action m-30 tc flex ts-28" v-else>
      <view class="btn bl" @tap="$xyfun.back()">返回</view>
      <view class="btn bl" @tap="onPay()">重新支付</view>
    </view>



		
		<!--支付弹窗-->
		<block>
			<view class="xy-modal-box xy-modal-box-center pay-model-box p-t-30 br-10 bg-w" :class="[payModelShow?'xy-modal-show':'']">
				<view class="title m-b-50 ts-32 tc bl-b p-b-30" :style="'border-color:#f7f7f7;'">支付方式</view>
				<view class="tc tb m-tb-40 ts-36">支付金额{{ orderDetail.total_fee || "0.00" }}元</view>
				<view class="pay-list">
					<view class="item flex p-30 m-b-2 lh-40 bg-w" v-for="(item, index) in payList" :key="index" v-if="item.state">
						<view class="l flex">
              <text :class="'yz-iconfont yz-'+item.icon+' ts-40 m-r-15'" :style="'color:'+item.color"></text>
							<text class="lh-40">{{item.name}}</text>
						</view>
						<view class="r tb m-l-auto" @tap="payMethodSelect(index)">
              <text class="yz-iconfont yz-gouxuan ts-32 lh-40" style="color:#4caf50;" v-if="item.select"></text>
              <text class="yz-iconfont yz-yuanxingweixuanzhong ts-32 lh-40" style="color: gray;" v-else></text>
						</view>
					</view>
				</view>
				
				<button :style="'background-color: #00dd83;'" class="ts-30 lh-30 p-25 tc-w m-30" @tap="subPay()">确认支付</button>
			</view>
			<view class="xy-modal-mask" :class="[payModelShow?'xy-mask-show':'']" @tap="payModelShow =!payModelShow"></view>
		</block>
	</view>
</template>

<script>
	import Pay from '@/utils/pay';
	export default {
		data() {
			return {

				orderId: 0,
				payState: 'fail',
				orderType: '',
				orderDetail:{},
				payModelShow:false,
				disabled:false,
				payText: {
					fail: '支付失败',
					success: '支付成功',
          repay : '重新支付',
          audit : '您的线下支付申请正在由工作人员审核'
				},
				payList:[
				{
					name: '微信支付',
					method: 'wechat',
					icon: 'wechat',
					state: true,
          color: '#3cb034',
					select: true
				}]
			}
		},
		async onLoad() {
			var options = this.$Route.query;
			console.log(options);
			if(options.orderId){
				this.orderId = options.orderId;
				this.payState = options.payState;
				this.orderType = options.orderType;
			}

      if(options.payState=='repay'){
        this.payModelShow = true;
      }

			if(this.orderType != 'recharge'){
				this.payList.push({
          name: '余额支付',
          method: 'balance',
          icon: 'balance',
          state: true,
          color: '#fe9c01',
          select: false
        })
			}

			this.getOrderDetail();
		},
		methods: {
			
			// 获取订单详情
			getOrderDetail() {
				switch (this.orderType) {
					case 'course':
						this.getCourseOrderDetail()
						break;
					case 'goods':
						this.getGoodsOrderDetail()
						break;
					case 'recharge':
						this.getRechargeOrderDetail()
						break;
					default:
						break;
				}
			},

      //查看订单
      redirect(){
        switch (this.orderType) {
          case 'course':
            this.$xyfun.to('/pages/user/order?order_type='+0);
            break;
          case 'goods':
            this.$xyfun.to('/pages/user/order?order_type='+1);
            break;
          case 'card':
            this.$xyfun.to('/pages/benfit/order');
            break;
          default:
            break;
        }
      },
			
			// 课程订单详情
			getCourseOrderDetail(){
				this.$api.post({
					url: '/course_order/detail',
					data: {
						id:this.orderId,
					},
					success: res => {
						this.orderDetail = res;
					}
				});
			},
			
			// 商城订单详情
			getGoodsOrderDetail(){
				this.$api.post({
					url: '/goods_order/detail',
					data: {
						id:this.orderId,
					},
					success: res => {
						this.orderDetail = res;
					}
				});
			},


      // 充值订单详情
      getVipOrderDetail(){
        this.$api.post({
          url: '/vip_order/detail',
          data: {
            id:this.orderId,
          },
          success: res => {
            this.orderDetail = res;
          }
        });
      },

			// 充值订单详情
			getRechargeOrderDetail(){
				this.$api.post({
					url: '/recharge_order/detail',
					data: {
						id:this.orderId,
					},
					success: res => {
						this.orderDetail = res;
					}
				});
			},
			
			// 重新支付
			onPay() {
				this.payModelShow = true;
			},
			
			//支付方式选择
			payMethodSelect(key){
				
				this.payList.map((value,index) => {
				　　if(index == key){
						value.select = !value.select;
					}else{
						value.select = false;
					}
				});
			},
			
			//确认支付
			subPay(){
				
				if(this.disabled){
					return false;
				}
				this.disabled = true;
				
				var pay_type = '';
				this.payList.map((value) => {
				　　if(value.select){
						pay_type = value.method;
					}
				});
				if (!pay_type) {
					this.$xyfun.msg('请选择支付方式');
				}else{
					//发起支付
					var pay = new Pay(pay_type, this.orderDetail, this.orderType);
					pay.payMehod().then((res)=>{
						this.disabled = true;
						pay.payResult(res);
					},()=>{
						this.disabled = false;
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.result{
		.tips{padding: 150rpx 0 30rpx;
			image{width: 140rpx;height: 140rpx;}
		}
		.action{
			.btn{flex: 1;height: 70rpx;border-radius: 35rpx;margin: 0 15rpx;line-height: 70rpx;}
		}
		.pay-model-box{width: 80%;}
	}
  .title{
    border-bottom: 1rpx solid #ececec;
  }
</style>
